<template>
  <div class="progress" ref="progress" style="width: 16px; height: 16px">
    <span class="progress-left" style="width: 8px; height: 16px">
      <span class="progress-bar" style="width: 8px; height: 16px"></span>
    </span>
    <span class="progress-right" style="width: 8px; height: 16px">
      <span class="progress-bar" style="width: 8px; height: 16px"></span>
    </span>
    <div class="after" style="width: 16px; height: 16px"></div>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
const progress = ref(null)
const rotate_right = ref(0)//右边的半圆进度
const rotate_left = ref(0)//左边的半圆进度
const props = defineProps({
  plan: {
    type: Number,
    default: 0
  }
})

//根据百分比计算度数
const calcRotate = (val) => {
  if (val <= 50) {
    rotate_right.value = parseInt((val * 180) / 50)
  } else {
    rotate_right.value = 180
    rotate_left.value = parseInt(((val - 50) * 180) / 50)
  }
  //--rotate1和--rotate2是在根元素上定义的css变量，可通过改变它的值来实现
  console.log(progress.value)
  progress.value.style.setProperty("--rotate1", "rotate(" + rotate_right.value + "deg)")

  progress.value.style.setProperty("--rotate2", "rotate(" + rotate_left.value + "deg)") //当前选择菜单背景色
}
onMounted(() => {
  calcRotate(props.plan)
})
// watch(//监测百分比值变化
//   () => props.plan,
//   (val) => {
//     calcRotate(val)
//   },
//   { immediate: true }
// );
</script>
<style lang="less" scope>
.progress {
  background: none;
  margin-right: 5px;
  box-shadow: none;
  position: relative;
  * {
    box-sizing: border-box;
  }
}
.progress .after {
  border-radius: 50%;
  border: 4px solid #186278;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  background: none;
  border-width: 4px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 0.3s linear forwards;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: var(--rotate1);
    transform: var(--rotate1);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: var(--rotate2);
    transform: var(--rotate2);
  }
}

.progress .progress-bar {
  border-color: #00f6ff;
}
.progress .progress-left .progress-bar {
  animation: loading-2 0.1s linear forwards 0.3s;
}
</style>